<template>
    <el-card>
        <el-page-header @back="back" content="朋友圈设置页面"></el-page-header>

        <div class="set_title">员工朋友圈管理</div>

        <div class="m-alert">
            <span class="el-icon-info"></span>
            <div>
                <div>可对员工朋友圈进行发布权限限制，朋友圈背景、个性签名统一等设置</div>
            </div>
        </div>

        <div class="interspaceH"></div>

        <el-form label-position="left" label-width="160px" :model="setFrom">
            <el-form-item label="统一朋友圈背景：">
                <el-switch v-model="setFrom.pyqBg"></el-switch>
                <span style="margin-left: 10px">朋友圈背景、个性签名默认为员工可以个性化上传定制；开启后，将显示管理员上传的素材，且员工不允许修改</span>


                <el-form v-if="setFrom.pyqBg" label-position="left" label-width="120px" :model="setFrom">
                    <el-form-item label="朋友圈签名：">
                        <el-upload
                                class="avatar-uploader"
                                action=""
                                :on-success="handleAvatarSuccess"
                                :show-file-list="false">
                            <img v-if="setFrom.pyqFile" :src="setFrom.pyqFile" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="朋友圈签名：">
                        <el-input type="textarea" placeholder="请输入内容" maxlength="60"></el-input>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item label="员工手机端发表：">
                <el-switch v-model="setFrom.employeeSend"></el-switch>
                <span style="margin-left: 10px">开启后，支持员工在移动端H5发表和删除朋友圈动态</span>
            </el-form-item>
        </el-form>

        <div class="set_title">企微朋友圈同步方式</div>

        <div class="m-alert">
            <span class="el-icon-info"></span>
            <div>
                <div>可设置是否自动将企微朋友圈发布的内容，自动同步至历史朋友圈</div>
            </div>
        </div>

        <div class="interspaceH"></div>

        <el-form label-position="left" label-width="160px" :model="setFrom">
            <el-form-item label="自动同步企微朋友圈：">
                <el-switch v-model="setFrom.syncPyq"></el-switch>
                <span style="margin-left: 10px">开启后，将在每日00:00、12:00 自动获取员工发布的企业微信朋友圈，并根据发布成员同步至该员工历史朋友圈</span>
            </el-form-item>
        </el-form>

        <div class="set_title">朋友圈客户行为追踪</div>

        <div class="m-alert">
            <span class="el-icon-info"></span>
            <div>
                <div>可设置打开朋友圈行为和次数的追踪规则，当客户触发规则时即可获得设置的客户评分和客户标签，并在客户动态中展示</div>
            </div>
        </div>

        <div class="interspaceH"></div>

        <el-card>
            <div slot="header" style="padding: 0px">
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="addRule">添加规则</el-button>
                <span style="margin-left: 10px;color: grey;font-size: 12px">添加的规则可同时生效</span>
            </div>
            <div>
                <div style="display:flex;justify-content: space-between;padding: 10px 0;border-bottom: 1px solid #eeeeee"
                     v-for="(item, index) in setFrom.ruleList" :key="index">
                    <div style="display:flex;align-items: center">
                        <div>规则{{ index + 1 }}：用户</div>
                        <el-select v-model="item.userHandle" placeholder="请选择" style="margin: 0 20px;width: 150px">
                            <el-option label="每次打开朋友圈" value="1"></el-option>
                            <el-option label="累计打开次数" value="2"></el-option>
                        </el-select>
                        <div>时，可评</div>
                        <el-input-number v-model="item.rate" controls-position="right" :min="1" :max="10"
                                         style="margin: 0 20px;width: 150px"></el-input-number>
                        分，
                        <div>并打上标签：</div>
                        <el-switch v-model="item.setTag" style="margin: 0 20px"></el-switch>
                    </div>
                    <el-button type="text" class="el-icon-delete" @click="deleteRule(index)"></el-button>
                </div>
            </div>
        </el-card>

    </el-card>
</template>

<script>
export default {
    name: "set_moments",
    data() {
        return {
            setFrom: {
                pyqBg: false,
                pyqFile: '',
                pyqContent: '',
                employeeSend: false,
                syncPyq: false,
                ruleList: []
            }
        }
    },
    mounted() {
    },
    methods: {
        back() {
            this.$emit('currentHandle', 'default')
        },
        addRule() {
            this.setFrom.ruleList.push({
                userHandle: '',
                rate: 0,
                setTag: false
            })
        },
        deleteRule(index) {
            this.setFrom.ruleList.splice(index, 1)
        },
        handleAvatarSuccess(res, file) {
            this.setFrom.pyqFile = URL.createObjectURL(file.raw);
        },
    }
}
</script>

<style scoped>
.el-icon-info {
    color: #35abff;
    margin-right: 10px;
}

.set_title {
    padding-left: 10px;
    border-left: 2px solid #0083ff;
    margin: 24px 0;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>